<template>
    <div class="foodlist">
        <div style="height: 100%;overflow: auto;">
                <div>
                    <div class="top">
                        <div class="topimg">
                            <img src="../assets/topimg.jpg" alt="">
                        </div>
                        <h1 @click="$router.push('/')" style="color: white;position: absolute;top: 0;left: 10px;"><</h1>
                        <div style="margin: auto;width: 80px;">
                            <div class="dianpuimg">
                                <img :src='this.$route.query.img' alt="">
                            </div>
                        </div>
                        <h2 style="margin-top: 43px">{{this.$route.query.title}}</h2>
                        <div class="msg">
                            <font>评分{{this.$route.query.pingfen}}</font>
                            <font>月售{{this.$route.query.yueshou}}</font>
                        </div>
                        <div class="active">
                            <font v-for="item,index in $route.query.huodong">活动{{item}}</font>
                        </div>
                        <h3 class="select">
                            <font>点餐</font>
                            <font>评价</font>
                            <font>商家</font>
                        </h3>
                        <hr>
                    </div>
                </div>
                <div class="caidan">
                    <div class="container" v-for="item,index in caidanlist">
                        <el-row>
                            <el-col :span="8">
                                <div class="menuimg">
                                    <img :src="'http://127.0.0.1:3000/'+item.menuimg" alt="">
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <h3> {{item.menutitle}}</h3>
                                <p style="font-size: 13px;">{{item.menumsg}}</p>
                                <el-row>
                                    <el-col :span="15">
                                        <h3 style="color: red;">
                                            ￥{{item.menumoney}}
                                        </h3>
                                    </el-col>
                                    <el-col :span="9">
                                        <el-button   @click="jian(index)" type="danger" style="width: 20px;height: 20px;position: relative;" circle><i class="el-icon-minus" style="position: absolute;top: 5px;right: 5px;"></i></el-button>
                                        <font style="padding:0 5px;line-height: 10px;">{{item.menunum}}</font>
                                        <el-button   @click="add(index)" type="primary" style="width: 20px;height: 20px;position: relative;" circle><i class="el-icon-plus" style="position: absolute;top: 5px;right: 5px;"></i></el-button>
                                    </el-col>

                                </el-row>

                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="bottom">
                    <div class="container">
                        <el-row v-show="foodnum==0">
                            <el-col :span="6">
                                <div style="height: 2px;"></div>
                                <div class="shopcar">
                                    <div style="overflow:hidden;width: 50px;height: 50px;margin: auto;margin-top: 5px;border-radius:50%;">
                                        <img src="../assets/shopcar.jpg" alt="" style="width: 100%;height: 100%;">
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="13" style="color:gray;">
                                <font>未选购商品</font><br>
                                <font>需要配送费￥{{this.$route.query.peisong}}</font>
                            </el-col>
                            <el-col :span="5">
                                <el-button type="primary" disabled>下单</el-button>
                            </el-col>
                        </el-row>
                        <el-row v-show="foodnum!=0">
                            <el-col :span="6">
                                <div style="height: 2px;"></div>
                                <div class="shopcar" style="background:rgb(49,144,232)">
                                    <div style="overflow:hidden;width: 50px;height: 50px;margin: auto;margin-top: 5px;border-radius:50%;">
                                        <img src="../assets/blueshopcar.png" alt="" style="width: 100%;height: 100%;">
                                    </div>
                                </div>
                                <div class="foodnum">
                                    {{foodnum}}
                                </div>
                            </el-col>
                            <el-col :span="13" style="color:gray;">
                                <font style="color: white;">￥{{foodmoney}}</font><br>
                                <font>需要配送费￥{{this.$route.query.peisong}}</font>
                            </el-col>
                            <el-col :span="5">
                                <el-button type="primary" @click="send()">下单</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>
    export default {
        name: "foodlist",
        data(){
            return{
                foodnum:0,
                foodmoney:0,
                peisongmoney:this.$route.query.peisong,
                caidanlist:'',
                shopcar:[]
            }
        },
    methods:{
      add(index){
          var menu=this.caidanlist[index];
          if(this.shopcar.length==0){
              menu.menunum=1;
              this.shopcar.push(menu);
          }else if(this.shopcar.length==1){
             if(this.shopcar[0].menutitle==menu.menutitle){
                 var shopcar=this.shopcar[0]
                 shopcar.menunum+=1;
                 this.shopcar.splice(0,1,shopcar)
             }else{
                 menu.menunum=1;
                 this.shopcar.push(menu);
             }
          }else{
              for(var i=0;i<this.shopcar.length;i++){
                  if(this.shopcar[i].menutitle==menu.menutitle){
                      var shopcar=this.shopcar[i]
                      shopcar.menunum+=1;
                      this.shopcar.splice(i,1,shopcar)
                      return
                  }
              }
              menu.menunum=1;
              this.shopcar.push(menu);
          }
      },
      jian(index){
          var menu=this.caidanlist[index];
          if(this.shopcar.length==0){
              return
          }else if(this.shopcar.length==1){
              if(this.shopcar[0].menutitle==menu.menutitle){
                  var shopcar=this.shopcar[0];
                  if(shopcar.menunum==0){
                      this.shopcar.splice(0,1);
                  }else{
                      shopcar.menunum-=1;
                      this.shopcar.splice(0,1,shopcar)
                  }
              }else{
                  return
              }
          }else{
              for(var i=0;i<this.shopcar.length;i++){
                  if(this.shopcar[i].menutitle==menu.menutitle){
                      var shopcar=this.shopcar[i]
                      if(shopcar.menunum==0){
                          this.shopcar.splice(i,1);
                      }else{
                          shopcar.menunum-=1;
                          this.shopcar.splice(i,1,shopcar)
                      }
                  }
              }
          }
        },
      send(){
          this.$router.push({path:'/sureorder',query:{
                  shoptitle:this.$route.query.title,
                  shopimg:this.$route.query.img,
                  goods:this.shopcar,
                  peisongmoney:this.$route.query.peisong,
                  money:this.foodmoney,
                  username:this.$store.state.dress.dressname,
                  userphone:this.$store.state.dress.dressphone,
                  userdress:this.$store.state.dress
              }});
          for(var i=0;i<this.caidanlist.length;i++){
              this.caidanlist[i].menunum=0
          }
      }
    },
    watch:{
         shopcar(after,before){
             if(after.length==0){
                 this.foodnum=0;
                 this.foodmoney=0;
             }else{
                 var money=parseFloat(this.peisongmoney);
                 var num=0;
                 for(var i=0;i<after.length;i++){
                     this.foodnum=num+=after[i].menunum;
                     this.foodmoney = money+=after[i].menumoney*after[i].menunum
                 }
             }
         }
    },
    created(){
            var foodlist=this.$store.state.foodlist;
            var title = this.$route.query.title
            for(var i=0;i<foodlist.length;i++){
                for(var x=0;x<foodlist[i].list.length;x++){
                    if(title==foodlist[i].list[x].title){
                        this.caidanlist=foodlist[i].list[x].caidan
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .container{
        width: 90%;
        margin:auto;
        margin-top:9px;
    }
    .foodlist{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .bottom{
        width: 100%;
        height: 60px;
        background: rgba(80,80,82,0.99);
        position: absolute;
        bottom:0;
        z-index: 1;
    }
    .shopcar{
        position: absolute;
        bottom:10px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 8px solid rgb(68,68,68);
        background: rgb(54,54,54);
    }
    .foodnum{
        width: 25px;
        height: 20px;
        background:orangered;
        position: relative;
        top: -50px;
        left: 50px;
        border-radius: 50%;
        text-align: center;
        color: white;
    }
    .top{
        position: relative;
        width: 100%;
        text-align: center;
    }
    .top .topimg{
        height: 100px;
        overflow: hidden;
    }
    .top img{
        width: 100%;
    }
    .dianpuimg{
        width: 80px;
        height: 80px;
        position:absolute;
        top: 45px;
        border-radius: 5px;
        border: 1px solid darkgrey;
        overflow: hidden;
    }
    .dianpuimg img{
        width: 100%;
        height: 100%;
    }
    .active font{
        font-size: 12px;
        border: 1px solid orangered;
        color: red;
        margin-right: 6px;
    }
    .active font:first-of-type{
        background: orangered;
        color: white;
    }
    .msg font{
        font-size: 13px;
        margin-right: 6px;
        color: darkgrey;
    }
    .select{
        display: flex;
        justify-content: space-around;
        margin-bottom: 6px;
    }
    .select font{
        padding: 5px;
        border-bottom: 1px solid;
    }
    .menuimg{
        width: 90px;
        height:90px;
    }
    .menuimg img{
        width: 100%;
        height: 100%;
    }
    .caidan{
        margin-bottom: 100px;
    }
</style>